<template>
<div class="content">
    <h2 class="subTitle">API</h2>
    <template v-if="propsList && propsList.length">
        <div v-for="(pItem, index) in propsList" :key="index">
            <h3 class="threeTitle">{{pItem.title}} props</h3>
            <Table :data="pItem.data" :columns="propColumns" border></Table>
        </div>
    </template>
    
    <slot></slot>
    <h2 class="subTitle">code</h2>
    <vue-json-editor class="ivu-mt"
        v-model="resultInfo"
        :showBtns="false"
        :height="'auto'"
        mode="code"
    />
</div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
export default {
    components: { vueJsonEditor },
    data() {
        return {
            resultInfo: {},
            propColumns: [
                { key: 'name', title: '属性', maxWidth: 165, },
                { key: 'desc', title: '说明', type: 'html'},
                { key: 'type', title: '类型', maxWidth: 120, },
                { key: 'default', title: '默认值', maxWidth: 160, },
            ]
        }
    },
    methods: {
    },
    watch: {
        bindConfig: {
            handler() {
                this.resultInfo = {
                    template: this.tpl,
                    bindConfig: this.bindConfig
                }
            },immediate: true
        }
    },
    props: {
        propsList: {
            default() {
                return []
            }
        },
        bindConfig: {
            default() {
                return {}
            }
        },
        tpl: {
            default() {
                return ''
            }
        },
    }
}
</script>

